<template>
  <div class="bannerBox">
    <div class="banner" @click="isShowGallary">
      <img class="banner-img" :src="bannerImg" alt="">
      <div class="banner-info">
        <div class="banner-title">{{sightName}}</div>
        <div class="banner-num">
        <span class="iconfont icon-tupian">
        </span>
          {{gallaryImgs.length}}
        </div>
      </div>
    </div>
    <router-link tag="div" class="back" to="/" v-show="showBack">
      <span class="iconfont icon-fanhui"></span>
    </router-link>
    <fade>
      <common-gallary
        :imgs="gallaryImgs"
        v-show="showGallary"
        @closeMe="closeGallary"
      >
      </common-gallary>
    </fade>
  </div>

</template>

<script>
  import CommonGallary from 'common/gallary/gallary'
  import fade from 'common/fade/fade'
  export default {
    name: "detailBanner",
    components:{
      CommonGallary,
      fade
    },
    data(){
      return{
        showGallary:false
      }
    },
    methods:{
      isShowGallary(){
        this.showGallary = true
      },
      closeGallary(){
        this.showGallary = false
      }
    },
    props :{
      showBack:Boolean,
      bannerImg: String,
      sightName: String,
      gallaryImgs:Array
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~style/mixins.styl"
  .bannerBox
    position: relative
    .back
      color #fff
      width: .72rem
      line-height:.72rem
      text-align center
      position: absolute
      left: .1rem
      top: .1rem
      border-radius .36rem
      z-index 2
      background: rgba(0,0,0,.5)
    .banner
      overflow: hidden
      height :0
      padding-bottom:55%
      position: relative
      .banner-img
        width: 100%
      .banner-info
        display flex
        position: absolute
        left: 0
        right: 0
        bottom: 0
        line-height:.6rem
        color #fff
        padding-bottom .1rem
        background-image: linear-gradient(top ,rgba(0,0,0,0),rgba(0,0,0,.7))
        .banner-title
          flex :1
          padding-left .2rem
          font-size .36rem
          ellipsis()

        .banner-num
          float: right
          margin-right:.3rem
          margin-top :.14rem
          background: rgba(0,0,0,.5)
          border-radius .3rem
          height .32rem
          line-height:.32rem
          padding .04rem .2rem
          .icon-sousuo
            font-size .24rem
</style>
